<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <style>
        .c1_top{
            border: 1px solid red;
            width: 500px;
            margin: auto;
            text-align: center;
        }
        #sub{
            margin-top: 20px;
            width: 180px;
        }
    </style>
</head>
<body>
<div class="c1_top">
    <h1>黑马程序员</h1>
    <form class="c2_from" action="show.html" id="ret1" method="post" autocomplete="off">
        <input type="text" id="name" name="name" placeholder="请输入用户名" value=""/><br>
        <input type="password" id="pwd" name="pwd" placeholder="请输入密码" value=""/><br>
        <input type="submit" id="sub" value="注册"/>
    </form>
</div>
</body>
<script>
    //1、为表单绑定提交事件
    document.getElementById("ret1").onsubmit = function () {
        //2、获取用户名和密码
        let name = document.getElementById("name").value;
        let pwd = document.getElementById("pwd").value;
        //3、判断用户名是否满足条件(4~16位纯字母)
        let reg1 = /^[A-Za-z]{4,16}$/;
        if (!reg1.test(name)) {
            alert("用户名输入有误！")
            return false;
        }
        //4、判断密码是否满足条件(6位纯数字)
        let reg2 = /^[0-9]{6}$/;
        if (!reg2.test(pwd)) {
            alert("密码输入有误！");
            return  false;
        }

        //用户名和密码都正确 返回true
        return true;
    }
</script>
</html>